<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
     <title>个人名片</title>
    <link href="dist/css/bootstrap.css" rel="stylesheet">
    <link href="dist/css/main.css" rel="stylesheet">
     <link href="dist/css/font-awesome.min.css" rel="stylesheet">
  </head> 
  <body>
    <div class="container">
    	<div class="col-lg-6 col-lg-offset-3">
    	
    		<!-- ===== vCard Navigation ===== -->
    		<div class="row w">
    			<div class="col-md-4">
    				<img class="img-responsive" src="dist/img/aa.jpg" alt="">
					<ul class="nav nav-tabs nav-stacked" id="myTab">
					  <li class="active"><a href="#about">About</a></li>
					  <li><a href="#profile">Profile</a></li>
					  <li><a href="#portfolio">Portfolio</a></li>
					  <li><a href="#contact">Contact</a></li>
					</ul>    			
				</div><!-- col-md-4 -->

    		<!-- ===== vCard Content ===== -->
    			<div class="col-md-8">
	    			<div class="tab-content">
	    			
	    			  <!-- ===== First Tab ===== -->
					  <div class="tab-pane active" id="about">
					  	<h3>youyou Tao</h3>
					  	<h5>Web Designer & Developer</h5>
					  	<hr>
					  	<p>Interested in the computer industry.Keep passion for new things.Full of intense curiosity.</p>
					  	<p>Like learning and have strong learning ability, hope to enrich themselves through learning</p>
					 	<p class="pull-right red"><i class="icon-heart"></i></p>
					  </div><!-- tab about -->
					  
	    			  <!-- ===== Second Tab ===== -->
					  <div class="tab-pane" id="profile">
					  	<h4><i class="icon-briefcase"></i> Job Experience</h4>
					  	<p class="sm">
					  		<grey>YunNan GuanFang.</grey> | Oct 2016 .<br/>
					  		<grey>NanChang ZTE</grey> | January 2017 .<br/>
					  	</p>
					  
						  <h4><i class="icon-file-text-alt"></i> Education</h4>
					  	<p class="sm">
					  		<grey>Electronic Science and technology</grey> | Southwest Forestry University.<br/>	
					  	</p>
					  	
						  <h4><i class="icon-trophy"></i> Awards</h4>
					  	<p class="sm">
					  		<grey>Third-Class For ESRI cup GIS Software Contest</grey> | 2015.<br/>
					  		<grey>Second-Class For Web Design Contest</grey> | 2016.<br/>
					  	</p>
					  </div><!-- Tab Profile -->
					  
	    			  <!-- ===== Third Tab ===== -->
					  <div class="tab-pane" id="portfolio">
						  <div class="row">
							  <div class="col-xs-6 centered">
							  	<img class="img-responsive" src="dist/img/p01.png" alt="">
							  	<a href="#"><h6><i class="icon-link"></i>  Photography</h6></a>
							  </div><!-- col-xs-6 -->
							  <div class="col-xs-6 centered">
							  	<img class="img-responsive" src="dist/img/p02.png" alt="">
							  	<a href="#"><h6><i class="icon-link"></i> VGE Website</h6></a>
							  </div><!-- col-xs-6 -->
						  </div><!-- row -->
						  
						  <div class="row">
						  	<br>	
							  <div class="col-xs-6 centered">
							  	<img class="img-responsive" src="dist/img/p03.png" alt="">
							  	<a href="#"><h6><i class="icon-link"></i> Class management system</h6></a>
							  </div><!-- col-xs-6 -->
							  <div class="col-xs-6 centered">
							  	<img class="img-responsive" src="dist/img/p04.png" alt="">
							  	<a href="#"><h6><i class="icon-link"></i> Poverty alleviation</h6></a>
							  </div><!-- col-xs-6 -->
						  </div><!-- row -->
					  </div><!-- /Tab Portfolio -->
					  
	    			  <!-- ===== Fourth Tab ===== -->
					  <div class="tab-pane" id="contact">
						  <h4>Contact Information</h4>
						  <hr>
						  <div class="row">
							  <div class="col-xs-4">
								  <p class="sm">
								    <i class="icon-globe"></i> - Telphone <br/>
									<i class="icon-envelope"></i> - Email                            
								  </p>
							  </div><!-- col-xs-6 -->
							  
							  <div class="col-xs-8">
								  <p class="sm">
								  	<i class="icon-phone"></i> - 13619604534 <br/>
									<i class="icon-apple"></i> - 853094838@qq.com 
								  </p>
							  </div><!-- col-xs-6 -->
						  </div><!-- row -->
						  
						  <h4>Social Links</h4>
						  <hr>
						  <div class="row">
							  <div class="col-xs-4">
								  <p class="sm">
								  	 <i class="icon-facebook"></i>- Home <br/>
									 <i class="icon-tumblr"></i> - Company  
								  </p>
							  </div><!-- col-xs-6 -->
							  
							  <div class="col-xs-8">
								  <p class="sm">
								  	<i class="icon-dribbble"></i> - JingDong Load,NanChang <br/>
									<i class="icon-twitter"></i> - ZTE Software Park 
								  </p>
							  </div><!-- col-xs-6 -->
						  </div><!-- row -->
					  </div><!-- Tab Contact -->
					  
					</div><!-- Tab Content -->
    			</div><!-- col-md-8 -->
    		</div><!-- row w -->
    	</div><!-- col-lg-6 -->
    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="dist/js/jquery.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
	<script>
	$('#myTab a').click(function (e) {
	  e.preventDefault()
	  $(this).tab('show')
	})	
	</script>    
    
  </body>
</html>
